<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				bor der: 1px solid red;
				fl oat: left;
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，内容行内元素*/
				/*结论：文本不能浮动，特点：块包行*/
			}
			img{
				border: 10px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/img_2.png" alt="皮卡丘" width="250px" height="250px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos distinctio eligendi, dolor tenetur, modi, nesciunt autem fugiat veniam nam vitae labore sapiente expedita quam provident? Eaque voluptatem nesciunt laudantium eveniet! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam accusamus, magni in ipsam autem, temporibus sit eaque quasi distinctio odit hic harum rerum possimus tempore, rem nisi beatae minima accusantium! <lprem> Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis veniam, officia quis error assumenda voluptatibus in? Quae veniam aliquid deserunt impedit magni doloribus, et tempora asperiores quos nihil provident odit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates laboriosam repudiandae totam animi ea esse aliquam blanditiis dolore perferendis laudantium est corporis recusandae porro, nulla, dolorem quidem placeat doloremque sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis atque error illum tempora debitis ullam ipsam repudiandae laudantium, tenetur porro aspernatur cumque vel eligendi optio asperiores necessitatibus, ab numquam laborum.</lprem></p>
	</body>
</html>